<template>
  <a-modal
    v-model:open="visible"
    title="在线导出"
    width="600px"
    destroy-on-close
    centered
    :ok-button-props="{ loading }"
    @cancel="close"
    @ok="ok"
  >
    <a-form ref="formRef" :model="formState" :rules="rules">
      <a-form-item name="bucketId">
        <radio-tree-data ref="mainModuleRef" v-model:value="formState.bucketId" type="data" />
      </a-form-item>
      <a-form-item name="exportFile" label="数据导出范围">
        <a-radio-group v-model:value="formState.exportFile" class="ml-24">
          <div class="h-36 flc">
            <a-radio :value="false">仅导出标注文件</a-radio>
          </div>
          <div class="h-36 flc">
            <a-radio :value="true">导出全部数据，包含源文件及已有的标注文件</a-radio>
          </div>
        </a-radio-group>
      </a-form-item>
      <a-form-item name="exportArea" label="数据导出格式">
        <a-radio-group v-model:value="formState.exportFormat" disabled class="ml-24">
          <div class="h-36 flc">
            <a-radio :value="true">平台默认格式</a-radio>
          </div>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
  import { message } from 'ant-design-vue'
  import { Rule } from 'ant-design-vue/lib/form/interface'
  import { computed, nextTick, ref } from 'vue'
  import { useRequest } from 'vue-request'

  import RadioTreeData from '@/components/RadioTreeData/index.vue'
  import { dmpTaskApi } from '@/services/api'

  import { DmpTask } from '../../types'

  export interface Props {
    exportAfter?: () => void
  }

  const props = withDefaults(defineProps<Props>(), {
    exportAfter: () => {}
  })

  const loading = computed(() => exportLoading.value)

  /* 弹窗显隐逻辑--------------------------------------------------------------------------------------- */
  const visible = ref(false)
  const open = async (record: DmpTask) => {
    visible.value = true
    formState.value.markId = record.id
    await nextTick()
    mainModuleRef.value?.getTreeData()
  }
  const close = () => {
    visible.value = false
    formRef.value.resetFields()
  }

  /* 表单逻辑--------------------------------------------------------------------------------------- */
  interface FormState {
    markId: string
    bucketId: string
    exportFile: boolean
    exportFormat: boolean
  }
  const formRef = ref()
  const formState = ref<FormState>({
    markId: '',
    bucketId: '',
    exportFile: false,
    exportFormat: true
  })

  const rules: Record<string, Rule[]> = {
    bucketId: [
      { required: true, trigger: 'change', validator: (rule, value) => (value === '' ? Promise.reject('请选择数据集') : Promise.resolve()) }
    ]
  }
  const { loading: exportLoading, runAsync: runExport } = useRequest(dmpTaskApi.onlineExport)
  const ok = async () => {
    await formRef.value.validateFields()
    await runExport(formState.value)
    message.success('已添加1项至任务队列')
    props.exportAfter()
    close()
  }

  /* 数据集列表逻辑--------------------------------------------------------------------------------------- */
  const mainModuleRef = ref()

  /* --------------------------------------------------------------------------------------- */

  defineExpose({
    open,
    close
  })
</script>
